<template>
  <div ref="libraryListPage" class="set-page">
    <div class="page-container">
      <div class="header">
        <div class="title">
          <span class="icon">
            <var-icon name="chevron-left" :size="24" @click="gotoRouter('user')" />
          </span>
          <span class="text">地点列表</span>
          <span class="btn">
            <span class="btn-item">
              <var-icon name="magnify" />
            </span>
            <span class="btn-item">
              <var-icon name="plus" @click="addLibrary" />
            </span>
          </span>
        </div>
      </div>
      <!-- 列表 -->
      <div class="center">
        <var-list :finished="finished" :loading="loading" @load="getList">
          <div class="card" v-for="(item, index) in state.list" :key="index" @touchstart="onTouchStart($event, item)"
            @touchend="onTouchEnd($event, item)">
            <div class="card-center">
              <div class="left-image">
                <img :src="item.imgUrl" alt />
              </div>
              <div class="right-word">
                <div class="title">{{ item.addressName }}</div>
                <div class="remark-content">{{ item.remark }}</div>
                <div class="other">{{ formatTime(item.createDate, "YYYY-MM-DD") }}</div>
              </div>
            </div>
          </div>
        </var-list>
      </div>
    </div>
  </div>
</template>
<script>
import { Dialog } from "@varlet/ui";
import { reactive, ref, onMounted } from "vue";
import { router } from "@/router";
import { getAddressList, deleteAddress } from "@/api";
import { getDate } from "@/util/formTime";
import { useStore } from "vuex";
import { getSystemBarHeight, setPageTopBarHeight } from "@/util/uni-5+app.utils";
export default {
  name: "LibraryListView",
  setup(props, ctx) {
    const libraryListPage = ref()
    const store = useStore();
    const loading = ref(false);
    const finished = ref(false);
    const loop = ref(null);
    const state = reactive({
      pageSize: 10,
      currentPage: 1,
      longTouch: false, //是否长按
      showDialog: false, //显示东西
      list: []
    });
    const addLibrary = () => {
      gotoRouter("addlabrary");
    }

    // 长按弹出 按下手指时触发
    const onTouchStart = (e, item) => {
      // console.log(e);
      clearTimeout(loop.value);
      loop.value = setTimeout(() => {
        state.longTouch = true;
        state.showDialog = true;
        // console.log("是长按", item);
        Dialog({
          title: "警告",
          message: "确定要删除：‘" + item.addressName + "’ 吗？",
          onConfirm: () => deleteItem(item)
        });
      }, 600);
    }
    // 长按 松开手指时触发
    const onTouchEnd = (e, item) => {
      clearTimeout(loop.value);
      if (!state.longTouch) {
        onClick(item);
      }
    }
    // 单击事件
    const onClick = item => {
      // console.log("点击事件:\n", item);
    }

    // 根据item.id来删除这条地点
    const deleteItem = item => {
      console.log("确定删除了", item);
      const { _id, userId } = item;
      deleteAddress({
        params: { _id, userId },
        success: res => {
          console.log("删除成功：\n", res);
          // getList();
          // 删除成功不再调用函数，直接过滤掉这条数据
          let list = state.list;
          list = list.filter(item => item._id !== _id);
          state.list = list;
          console.log("删除后数据的长度是：", state.list.length);
        },
        error: err => { },
        complete: () => { }
      });
    }

    // 跳转到添加项目的页面
    const gotoRouter = name => {
      router.push({ name: name });
    }

    const formatTime = (str, type) => {
      return getDate(str, type);
    }
    const getList = () => {
      getAddressList({
        params: {
          userId: store.state.userInfo.userId,
          pageSize: state.pageSize,
          currentPage: state.currentPage
        },
        success: data => {
          console.log(data);
          let { list, total } = data;
          list = list.map(item => {
            return {
              ...item,
              createDate: getDate(item.createDate, "YYYY-MM-DD")
            }
          })
          loading.value = false;
          state.list = [...state.list, ...list];
          console.log(total, "|已经拿到的数据长度：", state.list.length);
          if (state.list.length >= total) {
            finished.value = true;
            console.log("到底了");
          } else {
            state.currentPage = state.currentPage + 1;
          }
        },
        error: error => {
          console.log("网络连接失败", error);
        },
        complete: () => { }
      });
    }
    onMounted(() => {
      setPageTopBarHeight({
        dom: libraryListPage.value,
        height: getSystemBarHeight(),
        textColor: "dark"
      })
    })
    return {
      libraryListPage,
      loading,
      finished,
      getList,
      formatTime,
      state,
      onTouchStart,
      onTouchEnd,
      gotoRouter,
      addLibrary
    }
  }
};
</script>
<style lang="scss" scoped>
.set-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f2f7;

  overflow-y: auto;

  .page-container {
    width: 100%;
    height: 100%;
    // background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;

    .header {
      width: 100%;
      height: 40px;
      line-height: 40px;
      // display: flex;
      background-color: rgb(243, 242, 247);

      .title {
        width: 100%;
        text-align: center;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        position: relative;

        .btn {
          display: inline-block;
          display: flex;
          width: 80px;
          align-items: center;

          .btn-item {
            display: inline-block;
            padding: 0 10px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .icon {
          // float: left;
          width: 80px;
          height: 100%;
          line-height: 100%;
        }

        .text {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          // width: 100%;
          height: 100%;
          // z-index: -1;
        }
      }

      .searchBar {
        width: 100%;
        height: 30px;
        // background-color: orange;

        padding: 5px;

        .input-box {
          display: inline-block;
          width: 100%;
          height: 30px;
          border-radius: 50px;
          overflow: hidden;
          position: relative;

          .icon {
            width: 30px;
            height: 30px;
            display: inline-block;
            // background-color: orange;
            position: absolute;
          }

          input {
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: rgb(243, 242, 247);
            border: none;
            outline: none;
            padding-left: 30px;
          }
        }
      }
    }

    .center {
      padding: 5px;
      width: 100%;
      flex: 1;
      overflow-y: auto;

      .card {
        width: 100%;
        padding: 5px;

        .card-center {
          display: flex;
          background-color: white;
          width: 100%;
          height: 100%;
          border-radius: 5px;
          padding: 5px;

          .left-image {
            width: 80px;
            height: 80px;
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .right-word {
            flex: 1;
            height: 80px;
            overflow: hidden;
            display: flex;
            flex-direction: column;

            .title {
              font-weight: 500;
              font-size: 14px;
              line-height: 30px;
            }

            .remark-content {
              line-height: 30px;
              height: 30px;
              flex: 1;
              font-size: 12px;
              color: rgb(116, 116, 116);
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .other {
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              color: rgb(116, 116, 116);
            }
          }
        }
      }
    }
  }
}</style>